<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>



</head>

<body>
    <div id="app">
        <!-- v-for指令 v-for="变量 in 遍历对象" :key="唯一" -->

        <ul>
            <!-- <li v-for="stu in studetList">
                {{ stu.name }} ----- {{ stu.age }}
            </li> -->
            <!-- <li v-for="(stu,index) in studetList">
                {{ stu.name }} ----- {{ stu.age }} ------ {{index}}
            </li> -->

        </ul>
        <div>============</div>
        <ul>
            <!-- <li v-for="item in iPhone">
                {{item}}
            </li> -->
            <!-- <li v-for="(value,key) in iPhone">
                {{value}} --- {{key}}
            </li> -->
            <!-- <li v-for="(value,key,index) in iPhone">
                {{value}} --- {{key}}----{{index}}
            </li> -->
        </ul>

        <div>=============</div>
        <ul>
            <!-- 只能遍历正整数 -->
            <!-- <li v-for="num in 10">{{num}}</li> -->
            <!-- <li v-for="(num,index) in 10">{{num}} --- {{index}}</li> -->
        </ul>


        <!-- v-for :key必须绑定 key的值必须唯一 否则就会出现渲染异常 -->
        <!-- :key 不推荐使用下标 -->
        <button v-on:click="addStu">添加学生</button>
        <ul>
            <li v-for="(stu,index) in studetList" :key="stu.id">
                {{ stu.name }} ----- {{ stu.age }}
                <input type="text">
            </li>
        </ul>

    </div>


    <!-- 引入vue -->
    <script src=" https://unpkg.com/vue@3/dist/vue.global.js">
    </script>
    <script>
        const { createApp, ref, reactive } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {
                const studetList = ref([
                    { id: '001', name: '张三', age: 20 },
                    { id: '002', name: '王五', age: 22 },
                    { id: '003', name: '李四', age: 21 },
                    { id: '004', name: '赵六', age: 23 },

                ])

                const iPhone = reactive({
                    name: 'iPhone 16',
                    price: 6999,
                    color: '玫瑰红',
                    size: '6.1英寸',
                    memery: 16,
                    cpu: 'Apple A15 Bionic'
                })
                const addStu = () => {
                    // studetList.value.push({ name: '老王', age: 30 })
                    studetList.value.unshift({ id: '005', name: '老王', age: 30 })
                }

                return {
                    studetList,
                    iPhone,
                    addStu
                }
            }
        })
        // 挂载到dom
        app.mount('#app')
    </script>
</body>

</html>